@charset "UTF-8";
/*lideng*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*:before{
    box-sizing: border-box;
}
*:after{
    box-sizing: border-box;
}
html, body {
    position: relative;
    font-family:Source Han Sans CN ,PingFangSC-Regular,sans-serif,Helvetica Neue, Helvetica, Arial ;
    line-height: 1.5;
    color: #323232;
}
body {
    font-size: .14rem;
}
body *{
    box-sizing: border-box;
}
li{
    list-style: none;
}

a{
    color: #323232;
    cursor: pointer;
    text-decoration: none;
}

/*去除a点击之后的背景*/
a:active{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*清楚浮动*/
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

input,button{
    border: none;
    outline: none;
}

/*省略号*/
.ellipsis{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
/*============ 初始样式 到此结束 ============*/

/*============ 公共部分  开始 ============*/
//公共颜色
$color-green:#8cc31f;
$color-blue:#014da1;
$color-gray:#b6b6b6;
$color-white:#fff;
$color-paleWhite:#f4f4f4;


/*公共头部*/
.header-box{
    padding-bottom: 0.6rem;
}
.header-nav{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1111;
}
.header-top{
    background-color: $color-blue;
    position: relative;
    color: $color-white;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.16rem;
}
.goBack{
    /*border: solid 1px red;*/
    height: 0.26rem;
    padding:0 0.2rem;
    position: absolute;
    top:  0.18rem;
    left: 0;
}

.container{
    padding: 0;
    margin: 0;
    /*font-size: 0.4rem;*/
}
/*============ 公共部分  结束 ============*/

/*============ 分类首页 开始 ============*/

.classify-box{
    display: flex;
}
#myTab{
    width: 20%;
    background-color: $color-paleWhite;
    border: none;
    min-height: calc(100vh - 120px);
}
.myTab-item{
    display: block;
    width: 100%;
    text-align: center;
    padding: .2rem .10rem;
}

.myTab-item img{
    width: .2rem;
    display: block;
    margin: 0 auto 0.06rem;
}
#myTab .active{
    color: $color-green;
    border-left: solid 3px $color-green;
    background-color: $color-white;
}

.index-nav-content{
    width: 80%;
}
.nav-right{
    width: 100%;
    box-sizing: border-box;
    padding: .10rem;
}
.nav-right-title{
    font-size: .16rem;
    margin: .10rem 0;
}
.nav-right-link{
    display: flex;
    flex-wrap:wrap ;
}
.nav-right-link a{
    border-radius: 20px;
    padding: 0.02rem 0.08rem;
    border: solid 1px $color-gray;
    font-size: .12rem;
    margin: 0 .1rem .1rem 0;
}

/*============ 分类首页 到此结束 ============*/


/*============ 分类详情页 开始 ============*/
.classifyInfo-box{
    background-color: $color-paleWhite;
}
.classify-main{
    padding: .15rem;
    width: 100%;
    box-sizing: border-box;
}

.search-classify{
    display: block;
    width: 92%;
    margin:  0 auto .15rem;
    position: relative;
    height: .40rem;
    line-height: .40rem;
    border-radius:8px;
    background-color: $color-white;
}
.input-search{
    padding: .05rem .10rem;
    width: calc(100% - .58rem);
    height: .30rem;
    position: absolute;
    top: .05rem;
    left: .10rem;
}
.btn-search{
    width: .31rem;
    padding: 0 .10rem;
    height: .31rem;
    background: url("../icon/ic_search.png")no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: .05rem;
    right: .10rem;
}

.classify-banner{
    display: block;
    width: 100%;
    /*height: 80px;*/
}


.nav-classify-link{
    display: flex;
    flex-wrap:wrap ;
}
.nav-classify-link span{
    border-radius: .20rem;
    padding: .02rem .08rem;
    border: solid 1px $color-gray;
    font-size: .12rem;
    margin: 0 .10rem .10rem 0;
}
.nav-classify-link .active{
    border: solid 1px $color-green;
    color: $color-green;
}
.shop-item{
    width: 30.66%;
    margin-right: 4%;
    border: solid 1px $color-gray;
    box-sizing: border-box;
    text-align: center;
    float: left;
    padding: .05rem;
    margin-bottom: .10rem;
    background-color: $color-white;

    .content{
        position: relative;
        img {
            height: 1rem;
            width: 100%;
        }
    }
     .btn-group{
         display: flex;
         a{
             display: block;
             background-color: $color-green;
             width: 48%;
             text-align: center;
             font-size: .12rem;
             color: $color-white;
             padding: .04rem;
         }
         .btn-look{
            margin-right: 4%;
         }
     }
}

.shop-item:nth-child(3n){
    margin-right: 0;
}
.shop-item button{
    border-radius: .20rem;
    padding: .02rem 0;
    font-size: .12rem;
    background-color: $color-green;
    color: $color-white;
    border: none;
    outline: none;
    width: 94%;
    display: block;
    margin: .04rem auto 0;
}
/*==================分类结束=============*/

/*=================底部开始=============*/
.footer-box{
    padding-top: .60rem;
}
.footer-nav{
    width: 100%;
    height: .60rem;
    padding: .04rem 0;
    box-sizing: border-box;
    border-top: solid 1px $color-gray;
    background-color: $color-white;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 111;
}
.footer-nav {
    display: flex;
}
.footer-item{
   flex: 1;
}
.footer-item img{
    height: .2rem;
    margin:.04rem 0;
}
.footer-item .text{
    font-size: .14rem;
}
.footer-active{
    color: $color-green;
}
/*============ 底部 到此结束 ============*/

/*============  个人中心 开始 ============*/
.link-box{
    border-top: .10rem solid $color-paleWhite;
    padding:0 .15rem;
}
.user-link{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 0 15px;*/
    height: .48rem;
    line-height: .48rem;
    border-bottom: solid 1px $color-gray;
}

.link-item{
    display: flex;
    align-items: center;
    width: 100%;
}
.link-item img{
    height: .16rem;
    margin-right: .08rem;
}

.img-more{
    height: .20rem;
}
/*============  个人中心 结束 ============*/

/*============  已编辑模板 开始 ============*/
.edit-main{
    border-top: solid 10px $color-paleWhite;
    padding-top: 4%;
}
.edit-box{
    padding:0 4%;
}
.edit-item{
    float: left;
    width: 48%;
    margin-right: 4%;
    margin-bottom: .15rem;
    position: relative;
}
.edit-item:nth-child(2n){
    margin-right: 0;
}
.edit-content {
    position: relative;
    text-align: center;
}
.edit-content text{
    width: 100%;
    background-color: rgba(75, 75, 75, 0.6);
    color: $color-white;
    padding: .04rem 0;
    position: absolute;
    left: 0;
    bottom: 0;
}
.edit-item img{
    width: 100%;
    height: 2rem;
}

.edit-item button {
    border-radius: .20rem;
    padding: .06rem 0;
    font-size: .12rem;
    background-color: $color-green;
    color: $color-white;
    border: none;
    outline: none;
    width: 90%;
    display: block;
    margin: .04rem auto 0;
}